<template>
    <div class="home-icons">
        <swiper :options="swiperOptions" v-if="showSwiper">
            <swiper-slide v-for="(list,index) of iconPageList" :key="index">
                <div class="home-icon" v-for="item of list" :key="item.id">
                    <img class="icon-img" :src="item.imgUrl" />
                    <div>{{ item.desc }}</div>
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    iconList: Array
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  computed: {
    showSwiper () {
      return this.iconList.length > 0
    },
    iconPageList () {
      const icons = []
      for (const index in this.iconList) {
        let i = Math.floor(index / 8)
        if (!icons[i]) {
          icons[i] = []
        }
        icons[i].push(this.iconList[index])
      }
      return icons
    }
  }
}
</script>

<style scoped>
.home-icons >>> .swiper-wrapper {
    height: 3.7rem !important;
}
.home-icons >>> .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
}
.home-icons {
    height: 3.7rem;
    padding-top: .1rem;
}
.home-icon {
    float: left;
    width: 25%;
    height: 1.5rem;
    text-align: center;
    vertical-align: middle;
    padding-top: .1rem;
}
.icon-img {
    width: 1rem;
    height: 1rem;
    margin-bottom: .2rem;
}
</style>
